import { StyleSheet } from "react-native";

export const createStyles = (colors: any) =>
  StyleSheet.create({
    container: {
      backgroundColor: colors.background,
      borderRadius: 8,
      marginHorizontal: 16,
      marginVertical: 8,
      padding: 16,
    },
    header: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      marginBottom: 16,
    },
    title: {
      fontSize: 16,
      fontWeight: "500",
      color: colors.text.primary,
    },
    viewMore: {
      flexDirection: "row",
      alignItems: "center",
    },
    viewMoreText: {
      fontSize: 14,
      color: colors.text.secondary,
      marginRight: 4,
    },
    applicationsContainer: {
      flexDirection: "row",
      flexWrap: "wrap",
      justifyContent: "flex-start",
    },
    item: {
      width: "33.33%",
      alignItems: "center",
      paddingVertical: 16,
    },
    fileIcon: {
      width: 50,
      height: 50,
      borderRadius: 12,
      backgroundColor: "#FFB74D",
      justifyContent: "center",
      alignItems: "center",
      marginBottom: 8,
    },
    photoIcon: {
      width: 50,
      height: 50,
      borderRadius: 12,
      backgroundColor: "#4FC3F7",
      justifyContent: "center",
      alignItems: "center",
      marginBottom: 8,
    },
    stickerIcon: {
      width: 50,
      height: 50,
      borderRadius: 12,
      backgroundColor: "#9575CD",
      justifyContent: "center",
      alignItems: "center",
      marginBottom: 8,
    },
    itemTitle: {
      fontSize: 12,
      color: colors.text.primary,
    },
  });
